<!DOCTYPE html>
<html lang="en">
<head>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>新增明细</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="./jquery.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <style>
            form {
                width: 400px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .card {
                width: 100%;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                margin-bottom: 20px;
                padding: 20px;
            }

            label {
                display: block;
                margin-bottom: 10px;
                font-weight: bold;
                color: #333;
            }

            input,
            select {
                width: 100%;
                padding: 10px;
                margin-bottom: 20px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            button {
                background-color: #007bff;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 3px;
                cursor: pointer;
            }

            button:hover {
                background-color: #0056b3;
            }
        </style>
    </head>
</head>
<body>
<form id="myForm">
    <input type="hidden" name="id" id="billId" value="">
    <label for="billType">类型</label>
    <select id="billType" name="billType" >
        <option value="1">收入</option>
        <option value="2">支出</option>
    </select>
    <label for="billDesc">名称</label>
    <input  id="billDesc" name="billDesc"/>
    <label for="billDate">时间</label>
    <input  id="billDate" name="billDate"/>
    <label for="billAmount">金额</label>
    <input id="billAmount" name="billAmount"/>
    <button type="submit">提交</button>
    <button type="button" id="rebackBut">返回</button>
</form>
<script>
    $(document).ready(function () {
        $("#billDate").datepicker({dateFormat: 'yy-mm-dd',dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "下月",
            closeText: "关闭"});
        var param =getUrlParams();
        var startDate = param.startDate;
        var endDate = param.endDate;
        changeValue();
        function changeValue(){
            var billId = param.billId;
            $.ajax({
                url: "_addBill?billId="+billId, dataType: "json", success: function (result) {
                    var bill = result.bill;
                    $("#billId").val(bill.id)
                    $("#billType").val(bill.billType)
                    $("#billDate").val(bill.billDate)
                    $("#billDesc").val(bill.billDesc)
                    $("#billAmount").val(bill.billAmount)
                }
            });
        }
        $('#rebackBut').click(function () {
            window.location.href = '/entry.html?startDate='+startDate+'&endDate='+endDate;
        });

        $("#myForm").submit(function(event) {
            // 阻止表单默认提交行为
            event.preventDefault();
            // 发起POST请求提交表单数据
            var id = $("#billId").val();
            var billDate = $("#billDate").val();
            var billDesc = $("#billDesc").val();
            var billAmount = $("#billAmount").val();
            var billType = $("#billType").val();
            var bill = {
                id:id,
                billDate:billDate,
                billDesc:billDesc,
                billAmount:billAmount,
                billType:billType
            };
            $.ajax({
                type: "POST",
                url: "/editBill",
                data: JSON.stringify(bill),
                contentType: "application/json",
                success: function(response) {
                    window.location.href = '/entry.html?startDate='+startDate+'&endDate='+endDate;
                },
                error: function(error) {
                    // 处理提交失败的情况
                    console.log("提交失败");
                }
            });
        });
    });

    function getUrlParams() {
        var searchParams = new URLSearchParams(window.location.search);
        var params = {};
        for (var key of searchParams.keys()) {
            params[key] = searchParams.get(key);
        }
        return params;
    }
</script>
</body>
</html>